<!Doctype>
<html>
<head>
<title></title>

<link href="bootstrap.min.def.css" rel="stylesheet">
<style>
.error
{
color:red;
}
.form-horizontal{
 border:1px solid red;
 width:500px;
 }
 form-group{
    width: 1053px;
}

</style>

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="messages_zh.js"></script>
 
 
 <script>
 $.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
	  window.location.href="jquery_navbar/index.html";
    }
});

jQuery.validator.addMethod("isEmail",function(value,element){
var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
return this.optional(element)||(myreg.test(value));
},"请正确填写您的邮箱");


jQuery.validator.addMethod("isPassword",function(value,element){
//var pas=/[A-Z]/.test(password.value.charAt(0));
var pas=/[A-Z]/;
return this.optional(element)||(pas.test(value.charAt(0)));

},"请正确填写您的密码");

jQuery.validator.addMethod("isNumber",function(value,element){
 var length = value.length;
        var mobile = /^1[34578]\d{9}$/;/*/^1(3|4|5|7|8)\d{9}$/*/
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");

 $().ready(function(){
  $("#signupForm").validate({
    rules:{
      username:{
        required:true,
        minlength: 3
      },
	   email:{
        required:true,
        email: true,
		isEmail:true
		  
      },
      password:{
        required:true,
        minlength: 6,
		isPassword:true
      },
      repassword:{
        required: true,
        minlength: 6,
         equalTo: "#password"
      },   
      number:{
        required:true,
        maxlength: 11,
		isNumber:true
      },
    },
    messages:{
      username:{
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password:{
        required: "请输入密码",
        minlength: "密码长度不能小于6位",
		isPassword:"第一位为大写字母"
      },
      repassword:{
        required: "请输入密码",
        minlength: "密码长度不能小于6位"
      },
	  number:{
	  required:"请输入11位数字",
	  isNumber:"手机格式错误"
	  },
      email:{
	  required:"请输入一个正确的邮箱",
	  isEmail:"邮箱格式错误"
     }
     }
    
    });
});
 </script>
 </head>
<body>
<div class="bkg" align="center">
<div class="all" align="center">
<form class="form-horizontal" role="form" id="signupForm" >
   <div class="form-group">
      <label for="username" class="col-sm-2 control-label">用户名</label>
       <div class="col-sm-10">
         <input type="text" class="form-control" id="username"  name="username" placeholder="请输入用户名">
      </div>
	  
   </div>
   <div class="form-group">
      <label for="email" class="col-sm-2 control-label">邮箱</label>
      <div class="col-sm-10">
         <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱">
      </div>
   </div>
	  
	  <div class="form-group">
      <label for="password" class="col-sm-2 control-label">密码</label>
         <div class="col-sm-10">
         <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
         </div>
	  </div>
	  
	   <div class="form-group">
      <label for="repassword" class="col-sm-2 control-label">确认密码</label>
      <div class="col-sm-10">
         <input type="password" class="form-control" id="repassword"  name="repassword" placeholder="请确认密码">
      </div>
	  </div>
	  
	  <div class="form-group">
      <label for="number" class="col-sm-2 control-label">联系电话</label>
        <div class="col-sm-10">
         <input type="number" class="form-control" id="number"  name="number" placeholder="请输入联系电话"/>
        </div>
	  </div>
	  
	 
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <a href=""><input type="submit" style="width:100px;height:35px" class="btn btn-primary" value="注册"/></a>
		 已有账号？
      </div>
   </div>
   
   </form>
   </div>
</div>
<body>
</html>